<template>
    <div >
        <el-descriptions
         title="围栏详情"
         :column="1">
            <el-descriptions-item label="围栏标识符">
                <el-tag size="small">{{detailsObj.layerId}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="围栏名称">{{detailsObj.fenceName}}</el-descriptions-item>
            <el-descriptions-item label="经度">{{detailsObj.longitude}}</el-descriptions-item>
            <el-descriptions-item label="纬度">{{detailsObj.latitude}}</el-descriptions-item>
            <el-descriptions-item label="备注">
              {{detailsObj.remarks}}
            </el-descriptions-item>
        </el-descriptions>
        <!-- <el-row style="display: flex; align-items: center;">
            <el-col :span="12">
                <span>{{detailsObj.fenceName}}</span>
            </el-col>
            <el-col :span="12">
                <el-button
                 type="text"  
                 @click="mapClickEvent(detailsObj.layerId)">详情</el-button>
            </el-col>
        </el-row> -->
        <!-- <el-row style="display: flex; align-items: center;">
            <el-col :span="12" style="color:#ff2000">围栏标识符</el-col>
            <el-col :span="12" style="color:#ff2000">{{detailsObj.layerId}}</el-col>
        </el-row> -->
      <!-- <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>这是一段信息</span>
        </el-dialog> -->
    </div>    
</template>
<script>

export default{
    name: 'MapPop',
    data(){
        return{
            detailsObj:{},
            obj: { },
            dialogVisible: false,

        }
    },
    props: ["objes"],
    mounted() {
        
         this.detailsObj = this.objes
         console.log(this.detailsObj)
    },
    methods: {
        /**
         * 点击地图触发事件
         *
         */
        mapClickEvent(layerId) {
            // eslint-disable-next-line no-debugger
            debugger
            let that = this;
            console.log(layerId)
            // this.obj.that.$router.push({
            //     path: "/gridExceptionDetials",
            //     name: 'exceptionDetails',
            //     params: {
            //         id: 1,
            //         name: "异常信息",
            //     },
            // });
            that.$axios.get(`http://localhost:9002/fence/select_id/${layerId}`,{})
            .then(function (res) {
                console.log(res)  
                that.dialogVisible = !that.dialogVisible         
            })
            .catch(function (error) {
                console.log(error)
            }) 
            console.log(that)
        },
        handleClose(done) {
            this.dialogVisible = !this.dialogVisible
            console.log(done)
        }
    },
}

</script>
<style >
.mapboxgl-popup-content {
    width: 315px;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px;
    pointer-events: auto;
    background: rgb(255, 255, 255);
    border-radius: 3px;
    padding: 10px 10px 15px;
}

</style>